<template>
	<view class="user-order1">
		<view class="topStatu" style="background-image: url(/static/imgs/order/background.png);">
			<view class="top-conter">
				<view class="">
					<text>{{topTips.title}}</text>
					<text>{{topTips.time}}</text>
				</view>
				<view class="">
					<image :src="topTips.url" mode=""></image>
				</view>
			</view>
		</view>
		<!-- address -->
		<view class="addressBox">
			<view>
				<view class="btn-default">
					<text>默认</text>
				</view>
				<view class="address-column1">
					<image src="../../static/imgs/address-active.png" style="margin-top: -40upx;"></image>
				</view>
				<view class="address-column2">
					<view class="column2-t">
						<text>收货人：{{itemInfo.address_name}}</text>
						<text>{{itemInfo.address_phone}}</text>
					</view>
					<view class="column2-b">
						{{itemInfo.address}}
					</view>
				</view>
			</view>
			<view class="address1-item" v-if="itemInfo.status == 2 || itemInfo.status == 3">
				<image src="/static/imgs/order/icon_04.png" mode=""></image>
				<text>{{itemInfo.shop_address}}</text>
			</view>
		</view>

		<view class="od-line3" @click="navToProDetail(itemInfo.pro_id)">
			<view class="content-line1 order-detail-line1" style="padding: 0 25upx;">
				商品信息
			</view>
			<view class="content-line2" style="margin-top: 15upx; padding: 0 25upx;">
				<view class="line1-text1">
					<image :src="itemInfo.pro_img" mode=""></image>
				</view>
				<view class="line1-text2 font28">
					<!-- 	<view class="content-line1">
						<image src="../../static/imgs/order-icon1.png" mode="" class="order-icon"></image>
						<text class="line1-text2 font30">瑞派宠物店</text>
						<text class="iconfont">&#xe600;</text>
					</view> -->
					<view class="content-title">
						{{itemInfo.pro_name}}
					</view>
					<view class="price">
						<text class="font30">
							￥{{itemInfo.or_price}}
						</text>
						</br>
						<text class="font24">
							×{{itemInfo.or_pronum}}
						</text>
					</view>
				</view>
			</view>
			<view class="line2-bottom">
				<view class="bottom-item1">
					<text>配送费</text>
					<text>￥{{itemInfo.delivery_fee}}</text>
				</view>
				<view class="bottom-item2">
					<text>合计</text>
					<text>￥{{ $format(itemInfo.or_price * itemInfo.or_pronum) }}</text>
				</view>
				<view class="bottom-item3" v-if="itemInfo.or_status == 1">
					<text>待付款</text>
					<text>￥{{$format(itemInfo.or_price * itemInfo.or_pronum) }}</text>
				</view>
			</view>
		</view>
		<view class="line3-box">
			<view class="line3-title">
				<text class="title-left">|</text>订单信息
			</view>
			<view class="orderInfo">
				<view class="orderInfo-box">
					<text>订单号：</text>
					<text>{{itemInfo.orid}}</text>
				</view>
				<view class="orderInfo-box">
					<text>创建时间：</text>
					<text>{{itemInfo.apply_order_time}}</text>
				</view>
				<view class="orderInfo-box">
					<text>付款时间：</text>
					<text>{{itemInfo.or_success_time}}</text>
				</view>
				<view class="orderInfo-box">
					<text>配送方式：</text>
					<text v-if="itemInfo.delivery == 1">自提</text>
					<text v-else>送货上门</text>
				</view>
				<view class="orderInfo-box">
					<text>订单备注：</text>
					<text>{{itemInfo.order_comment}}</text>
				</view>
			</view>
		</view>
		<!-- <image src="/static/imgs/order/icon_03.png" mode=""></image> -->

		<view class="button" v-if="itemInfo.status == 0">
			<view class="" @click="deleteOrder(itemInfo)">
				<text>删除订单</text>
			</view>
			<view class="" @click="toPay(itemInfo)">
				<text>立即支付</text>
			</view>
		</view>
		<view class="button" v-if="itemInfo.status == 3">
			<view class="" @click="navToReturns(itemInfo)">
				<text>退货退款</text>
			</view>
			<view class="" @click="navEvaluation(itemInfo)">
				<text>评价</text>
			</view>
			<view @click="complaint(itemInfo)">
				<text class="tssj">投诉商家</text>
			</view>
		</view>
		<view class="dt-button" v-if="itemInfo.status == 2">
			<view @click="pickUpCode()">
				<text class="thm">提货码</text>
			</view>
			<view>
				<text class="tssj" @click="confirmReceipt(itemInfo)">确认收货</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusType: 0,
				swiperCurrent1: 0,
				topTips: {},
				itemInfo: {},
				pickUpCodeInfo: {},
				orderList: [{
						name: "订单号",
						value: "48654785247857755"
					},
					{
						name: "创建时间",
						value: "2020-01-26 10：36"
					},
					{
						name: "配送方式",
						value: "送货上门"
					},
					{
						name: "订单备注",
						value: "麻烦尽快送达，包裹里的物品请轻拿轻放，打包时多放几个泡沫，以防摔碎"
					},
				],
				navList: [{
					id: '0',
					name: '全部'
				}, {
					id: '1',
					name: '待评价'
				}, {
					id: '2',
					name: '已评价'
				}]
			}
		},
		onLoad(item) {
			this.itemInfo = JSON.parse(item.item)
			console.log(this.itemInfo)
			this.pickUpCodeInfo = this.itemInfo
			this.getDeilds(this.itemInfo.orid, this.itemInfo.or_status)
			uni.setNavigationBarTitle({
				title: this.itemInfo.status
			});
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#FF557D',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.changeConter(this.itemInfo.or_status)
		},
		methods: {
			navToProDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?proid=' + id
				})
			},
			//退款退货
			navToReturns(item) {
				let id = item.orid
				uni.navigateTo({
					url: '/pages/user/refund?id=' + JSON.stringify(id)
				})
			},
			//去付款
			toPay(item) {
				console.log(item)
				let totalNum = (item.or_price * item.or_pronum)
				let option = {}
				option.order_id = item.orid
				option.price = totalNum
				uni.navigateTo({
					url:'/pages/discountMall/payAnew?option='+ JSON.stringify(option)
				})
			},
			navEvaluation(item) {
				let id = item.orid
				console.log(id)
				uni.navigateTo({
					url: '/pages/order/assess/commentPage?id=' + JSON.stringify(id)
				})
			},
			complaint(item) {
				let id = item.orid
				console.log(id)
				uni.navigateTo({
					url: '/pages/user/complaint?id=' + JSON.stringify(id)
				})
			},

			pickUpCode() {
				let item = this.pickUpCodeInfo
				uni.navigateTo({
					url: '/pages/user/pickUpCode?item=' + JSON.stringify(item)
				})
			},
			deleteOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除订单？',
					success: res => {
						if (res.confirm) {
							this.delOrder(item)
						} else if (res.cancel) {

						}
					}
				});
			},
			//确认删除
			async delOrder(item) {
				uni.showLoading({
					title: '加载中'
				});
				let res = await this.$http.receiptShopOrder({
					action: "delete_order",
					order_id: item.orid
				});
				uni.hideLoading();
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功！',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/order/user-order?id=1'
						})
					}, 2000);
				} else {
					uni.showToast({
						title: '操作失败！',
						icon: 'none',
						duration: 2000
					});
				}
			},

			confirmReceipt(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					success: res => {
						if (res.confirm) {
							this.commitReceipt(item)
						} else if (res.cancel) {

						}
					}
				});
			},
			//确认收货
			async commitReceipt(item) {
				uni.showLoading({
					title: '加载中'
				});
				let res = await this.$http.receiptShopOrder({
					action: "sure_order",
					order_id: item.orid
				});
				uni.hideLoading();
				if (res.code == 200) {
					uni.showToast({
						title: '收货成功！',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/order/user-order?id=5'
						})
					}, 2000);
				} else {
					uni.showToast({
						title: '操作失败！',
						icon: 'none',
						duration: 2000
					});
				}
			},
			async getDeilds(id, type) {
				let res = await this.$http.shopOrderDetails({
					order_id: id
				});
				if(res.code !=200){
					
				}
				this.itemInfo = res.data
				console.log(this.itemInfo)
			},
			changeConter(type) {
				if (type == 0) {
					this.topTips.title = "等待您付款"
					this.topTips.time = "剩余时间 00:29:53"
					this.topTips.url = "/static/imgs/order/icon_01.png"
				} else if (type == 2) {
					this.topTips.title = "商品配送中"
					this.topTips.time = "请耐心等候"
					this.topTips.url = "/static/imgs/order/icon_02.png"
				} else if (type == 1) {
					this.topTips.title = "商品已准备就绪"
					this.topTips.time = "请尽快来提取您的宝贝"
					this.topTips.url = "/static/imgs/order/icon_02.png"
				} else if (type == 3) {
					this.topTips.title = "交易完成"
					this.topTips.time = "欢迎下次再次购买"
					this.topTips.url = "/static/imgs/order/icon_03.png"
				} else {
					this.topTips.title = this.itemInfo.status
					this.topTips.url = "/static/imgs/order/icon_02.png"
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			onNav2(e) {
				this.swiperCurrent1 = e.target.id
			},
			changeSwiper(e) {
				this.swiperCurrent1 = e.target.current
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/user-order.scss';

	.topStatu {
		margin-top: 2upx;
		width: 100%;
		height: 161upx;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-conter {
			height: 100%;
			width: 550upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>view {
				display: flex;
				flex-direction: column;
				font-size: 26upx;
				color: #FFFFFF;

				&>text:first-child {
					font-size: 32upx;
				}
			}

			&>view:last-child {
				&>image {
					width: 100upx;
					height: 100upx;
				}
			}
		}
	}

	.content-title {
		margin-top: 10upx;
	}

	.line2-bottom {
		padding: 0 25upx;
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 35upx;

		&>view {
			line-height: 58upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.bottom-item1 {
			color: #9b9b9b;
			font-size: 26upx;
		}

		.bottom-item2 {
			font-size: 28upx;

			&>text:last-child {
				color: #797979;
			}
		}

		.bottom-item3 {
			font-size: 30upx;

			&>text:last-child {
				color: #ff557d;
			}
		}
	}

	.line3-box {
		width: 95%;
		margin: 24upx auto;
		// height: 180upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		overflow: hidden;
		padding: 10upx 10upx;
		position: relative;

		.line3-title {
			padding: 0 10upx;
			font-size: 30upx;
			color: $color9;
			line-height: 70upx !important;

			.title-left {
				font-size: 34upx;
				padding-right: 10upx;
				color: #ff2b06;
			}
		}

		.orderInfo-box {
			padding: 0 10upx;
			display: flex;
			// align-items: center;
			font-size: 30upx;
			width: 100%;

			&>text:first-child {
				display: block;
				width: 200upx;
				line-height: 60upx;
			}

			&>text:last-child {
				display: block;
				width: 500upx;
				color: #797979;
				font-size: 28upx;
			}
		}
	}

	.addressBox {
		width: 95%;
		margin: 24upx auto;
		// height: 180upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		overflow: hidden;
		padding: 10upx 10upx;
		position: relative;
		display: flex;
		flex-direction: column;

		.address-column1 {
			text-align: center;
			float: left;
			width: 100upx;
			line-height: 150upx;

			image {
				// margin-top: -10upx;
				width: 44upx;
				height: 58upx;
			}
		}

		.address-column2 {
			float: left;
			width: 560upx;

			.column2-t {
				text:first-child {
					color: $color3;
					font-size: 28upx;
				}

				text:last-child {
					margin-left: 18upx;
					color: $color9;
					font-size: 24upx;
				}
			}

			.column2-b {
				color: $color3;
				font-size: 28upx;
			}

		}
		.btn-default{
			border: 1px solid #ff557d;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 22upx;
			right: 20upx;
			width: 88upx;
			height: 46upx;
			font-size: 26upx;
			color: #ff557d;
			border-radius: 15upx;
		}
		
	}

	.address1-item {
		border-top: 1px solid #faf2f5;
		font-size: 24upx;
		color: #666666;
		display: flex;
		align-items: center;

		&>image {
			margin-left: 40upx;
			margin-top: 10upx;
			width: 30upx;
			height: 40upx;
		}

		&>text {
			margin-left: 28upx;
		}

		// display: flex;
		// align-items: center;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		background-color: #FFFFFF;

		&>view {
			margin-right: 30upx;
			width: 149upx;
			height: 57upx;
			border-radius: 35upx;
			border: 1px solid #000000;
			font-size: 26upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&>view:last-child {
			color: #FFFFFF;
			border: 1px solid #ff557d;
			background-color: #ff557d;
		}
	}

	.od-line2 .line2-active:after {
		left: 100upx;
	}

	.od-line3 .content-line3 {
		height: 110upx;
		line-height: 110upx;
	}

	.od-line3 .content-line3 .line3-l {
		line-height: 110upx;
	}
</style>
